<template>
  <div class="">
    <!-- 云圈 -->
    <div class="father">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="vediobox" v-for="(item, index) in datas" :key="index">
          <div class="vedios">
            <p class="title">#{{ item.name }}#</p>
            <img
              class="coverimg"
              :src="item.cover"
              alt=""
              @click="loadurl(item.id, index)"
            />
            <span class="onoff" @click="onoff(index)">关闭</span>
          </div>
          <video class="vedio" :src="url" controls></video>
          <div class="footer">
            <van-icon name="share-o" />
            <span class="shareCount">{{ shareCount[index] }}</span>
            <van-icon name="chat-o" />
            <span class="commentCount">{{ commentCount[index] }}</span>
            <van-icon name="good-job-o" />
            <span class="likedCount">{{ likedCount[index] }}</span>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import axios from "../../../axios/index";
// import Toast from "vant";
export default {
  data() {
    return {
      datas: [],
      ids: [],
      url: [],
      commentCount: [],
      likedCount: [],
      shareCount: [],
      count: 0,
      isLoading: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    loaddata() {
      let offset = parseInt(Math.random() * 20);
      axios
        .get(`/mv/exclusive/rcmd?limit=20&offset=${offset}`, {
          withcredentials: true,
        })
        .then((res) => {
          console.log(res.data.data);
          this.datas = res.data.data;
          this.datas.forEach((v) => {
            this.ids.push(v.id);
          });
          console.log(this.ids);
          this.ids.forEach((v) => {
            axios
              .get(`/mv/detail/info?mvid=${v}`, {
                withcredentials: true,
              })
              .then((res) => {
                // console.log(res.data);
                this.commentCount.push(res.data.commentCount);
                this.likedCount.push(res.data.likedCount);
                this.shareCount.push(res.data.shareCount);
              });
          });
          // console.log(this.urls);
        });
    },
    loadurl(id, index) {
      axios
        .get(`/mv/url?id=${id}`, {
          withcredentials: true,
        })
        .then((res) => {
          // console.log(res);
          this.url = res.data.data.url;
        });
      document.querySelectorAll(".vedio")[index].style.display = "block";
      document.querySelectorAll(".coverimg")[index].style.display = "none";
      document.querySelectorAll(".onoff")[index].style.display = "block";
    },
    onoff(index) {
      document.querySelectorAll(".vedio")[index].style.display = "none";
      document.querySelectorAll(".coverimg")[index].style.display = "block";
      document.querySelectorAll(".onoff")[index].style.display = "none";
      document.querySelectorAll(".vedio")[index].pause();
    },
    onRefresh() {
      location.reload();
      setTimeout(() => {
        // Toast("刷新成功");

        this.isLoading = false;
        this.count++;
      }, 2000);
    },
  },
  async created() {
    this.loaddata();
    console.log(this.ids);
  },

  mounted() {},
  components: {},
};
</script>
<style scoped>
img {
  width: 300px;
  display: block;
  margin: auto;
}
video {
  width: 300px;
  display: none;
  margin: auto;
}
.title {
  padding: 10px;
  font-style: 16px;
  margin-bottom: 15px;
  color: #6c8099;
  line-height: 35px;
}
.footer {
  padding: 10px;
  font-size: 12px;
  color: #606060;
}
.shareCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.commentCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.likedCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.vedios {
  position: relative;
}
.onoff {
  position: absolute;
  color: #fff;
  right: 40px;
  top: 110px;
  padding: 0;
  display: none;
  z-index: 999999999999;
}
.father {
  padding-bottom: 70px;
}
</style>
